<template>
  <div class="container">
    <div>
      <van-nav-bar left-text="返回" left-arrow @click-left="onClickLeft">
        <template #right>
          <van-icon name="star-o" size="24" />
        </template>
      </van-nav-bar>
    </div>
    <!-- 商品导航 -->
    <div class="ShopNavbar" id="ShopNavbar" style="display: none">
      <van-tabs v-model:active="active">
        <van-tab title="商品"> </van-tab>
        <van-tab title="评价"> </van-tab>
        <van-tab title="详情"> </van-tab>
        <van-tab title="推荐"> </van-tab>
      </van-tabs>
    </div>
    <!-- 轮播图 -->
    <div>
      <van-swipe :autoplay="3000" lazy-render>
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" />
        </van-swipe-item>

        <template #indicator="{ active, total }">
          <div class="custom-indicator">{{ active + 1 }}/{{ total }}</div>
        </template>
      </van-swipe>
    </div>
    <!-- 列表商品详情 -->
    <div style="margin-bottom: 50px">
      <van-list class="list1">
        <van-cell>
          <div class="pricelist">
            <span class="jiage">￥2000</span
            ><van-icon name="like-o" size="20" />
          </div>
          <div class="shopdesc">
            <p>林家铺子 糖水黄桃罐头 360g*6罐</p>
          </div>
        </van-cell>
      </van-list>
      <van-list class="list2">
        <van-cell title="参数&nbsp;&nbsp;&nbsp;品牌、系列……" is-link />
        <van-cell title="选择&nbsp;&nbsp;&nbsp;口味" is-link />
        <van-cell
          title="发货&nbsp;&nbsp;&nbsp;辽宁大连 | 快递：免运费"
          is-link
        />
        <van-cell
          title="保障&nbsp;&nbsp;&nbsp;假一赔四．极速退款．七天无理由退换"
          is-link
        />
      </van-list>
      <van-list style="margin: 10px 0">
        <van-cell
          title="专业服务 7天无理由·24小时极速退款·商城专属服务"
          is-link
        >
        </van-cell>
      </van-list>
      <!-- #F5F6F8 -->
      <van-list>
        <van-cell title="评价 2000+" is-link value="好评99%" />
        <div v-for="i in 20" :key="i">
          <van-cell title="用户1234" icon="manager" value="2023年2月2日" />
          <van-cell class="pingjia">
            质量没的说,物流速度很快,摸起来手感nice,质量没的说,物流速度很快,摸起来手感nice.
            <span>肉罐头*2</span></van-cell
          >
        </div>
      </van-list>
    </div>
    <!-- 猜你喜欢 推荐 -->
    <!-- 详情 -->

    <ShopFooter></ShopFooter>
  </div>
</template>

<script setup lang="ts">
import { ref, onUnmounted } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const Dpath = router.currentRoute.value.path
const onClickLeft = () => history.back()
const active = ref(0)
const images = [
  'https://img1.baidu.com/it/u=2534083975,2209120468&fm=253&fmt=auto&app=138&f=JPEG?w=731&h=470',
  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.3490.cn%2Fedit%2F2017%2F04-14%2F20170414095010081008.jpg&refer=http%3A%2F%2Fpic.3490.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674730217&t=521725e4ecec50ee51547705687f522f',
  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg30.360buyimg.com%2Fsku%2Fjfs%2Ft4327%2F119%2F1131415753%2F337146%2F64e7e6df%2F58be198cN3323f89b.jpg&refer=http%3A%2F%2Fimg30.360buyimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674730233&t=8fe910959bc5c33836c4d30ef71b0751',
  'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.taolinzhen.com%2Fupload%2Fimage%2F20190216%2F18011094117_450x278.jpg&refer=http%3A%2F%2Fwww.taolinzhen.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1674730285&t=6761f8024ec3a12fea3505edfadf58a1',
]
function add1() {
  const scrollTop = document.documentElement.scrollTop
  console.log(scrollTop)
  if (scrollTop < 20) {
    document.getElementById('ShopNavbar')!.style.display = 'none'
  }
  if (scrollTop >= 20) {
    document.getElementById('ShopNavbar')!.style.display = 'block'
  }
}
// 商品导航栏隐藏显示
window.addEventListener('scroll', add1)
onUnmounted(() => {
  console.log('onUnmounted')
  window.removeEventListener('scroll', add1)
})
</script>

<style scoped lang="scss">
.container {
  background-color: #f2f2f2;
  .ShopNavbar {
    position: fixed;
    top: 0;
    z-index: 1000;
    width: 100%;
  }
}
:deep(.van-nav-bar__content) {
  height: 50px;
  background-color: #fff;
  color: black;
  --van-nav-bar-text-color: black;
  --van-nav-bar-icon-color: black;
}

:deep(.van-nav-bar__text) {
  color: black;
  font-size: 14px;
  font-weight: lighter;
}

:deep(.van-nav-bar__title) {
  color: black;
}

img {
  width: 100%;
  height: 60vw;
}

.custom-indicator {
  position: absolute;
  right: 5px;
  bottom: 5px;
  padding: 2px 5px;
  font-size: 12px;
  background: rgba(0, 0, 0, 0.1);
}
.list1 {
  > .van-cell:after {
    border-bottom: 0;
  }
}
.list2 {
  > .van-cell:after {
    border-bottom: 0;
  }
  margin-top: 20px;
}
.pricelist {
  font-size: 20px;
  display: flex;
  justify-content: space-between;
  .jiage {
    color: red;
  }
}
.shopdesc {
  margin-top: 10px;
  font-size: 18px;
  text-align: left;
}
.kongbai {
  width: 100%;
}
.pingjia {
  text-indent: 2em;
  ::v-deep .van-cell__value {
    text-align: left !important;
  }
}
</style>
